<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>EnjoyHealth.me</title>
        <link rel="stylesheet" href="../css/jquery.mobile-1.3.1.css" />
        <link rel="stylesheet" href="../css/enjoyLifeTheme.css" />
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../lib/jquery.mobile-1.3.1.min.js">
        </script>
        <script type="text/javascript" charset="utf-8" src="../lib/cordova.js">
        </script>
        <script src="../js/iscroll.js" type="text/javascript"></script>
        <script src="../js/config.js" type="text/javascript"></script> 
        <script src="../js/getMessages.js" type="text/javascript"></script>      
        <style type="text/css">
        
            #wrapper {
                position:absolute; z-index:1;
                top:75px;left:-9999px;
                height: 90%;
                width:100%;
                overflow:auto;
            }

            #scroller {
                position:absolute; z-index:1;
            /*  -webkit-touch-callout:none;*/
                -webkit-tap-highlight-color:rgba(0,0,0,0);
                width:100%;
                padding:0;
            }

            #scroller ul {
                list-style:none;
                padding:0;
                margin:0;
                width:100%;
                text-align:left;
            }

            #scroller li {
                padding:0 15px 0 25px;
                /*height:40px;*/
                /*line-height:40px;*/
                border-bottom:1px solid #AAAAAA;
                /*border-top:1px solid #fff;*/
                background-color:#fafafa;
                font-size:14px;
            }

            #myFrame {
                position:absolute;
                top:0; left:0;
            }

            /**
             *
             * Pull down styles
             *
             */
            #pullDown, #pullUp {
                background:#000;
                height:40px;
                line-height:40px;
                padding:5px 10px;
                border-bottom:1px solid #ccc;
                font-weight:bold;
                font-size:14px;
                color:#FFF;
            }
            #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
                display:block; float:left;
                width:40px; height:40px;
                background:url(pull-icon@2x.png) 0 0 no-repeat;
                -webkit-background-size:40px 80px; background-size:40px 80px;
                -webkit-transition-property:-webkit-transform;
                -webkit-transition-duration:250ms;  
            }
            #pullDown .pullDownIcon {
                -webkit-transform:rotate(0deg) translateZ(0);
            }
            #pullUp .pullUpIcon  {
                -webkit-transform:rotate(-180deg) translateZ(0);
            }

            #pullDown.flip .pullDownIcon {
                -webkit-transform:rotate(-180deg) translateZ(0);
            }

            #pullUp.flip .pullUpIcon {
                -webkit-transform:rotate(0deg) translateZ(0);
            }

            #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
                background-position:0 100%;
                -webkit-transform:rotate(0deg) translateZ(0);
                -webkit-transition-duration:0ms;

                -webkit-animation-name:loading;
                -webkit-animation-duration:2s;
                -webkit-animation-iteration-count:infinite;
                -webkit-animation-timing-function:linear;
            }

            @-webkit-keyframes loading {
                from { -webkit-transform:rotate(0deg) translateZ(0); }
                to { -webkit-transform:rotate(360deg) translateZ(0); }
            }

            #publicationList h3{
                white-space: normal;
                font-size: 24px;
                display:block;
                float:left;
            }
            #publicationList p.fechaDerecha{
                white-space: normal;
                display:block;
                float:right;
                text-align: right;
                font-size:14px;
                color: #999999;
            }
            #publicationList p.textoPublicacion{
                font-size: 24px;
                clear:both;
            }

            .ui-shadow,
            .ui-btn-up-a,
            .ui-btn-hover-a,
            .ui-btn-down-a,
            .ui-body-b,
            .ui-btn-up-b,
            .ui-btn-hover-b,
            .ui-btn-down-b,
            .ui-bar-c,
            .ui-body-c,
            .ui-btn-up-c,
            .ui-btn-hover-c,
            .ui-btn-down-c,
            .ui-bar-c,
            .ui-body-d,
            .ui-btn-up-d,
            .ui-btn-hover-d,
            .ui-btn-down-d,
            .ui-bar-d,
            .ui-body-e,
            .ui-btn-up-e,
            .ui-btn-hover-e,
            .ui-btn-down-e,
            .ui-bar-e,
            .ui-overlay-shadow,
            .ui-shadow,
            .ui-btn-active,
            .ui-body-a,
            .ui-bar-a {
             text-shadow: none;
             box-shadow: none;
             -webkit-box-shadow: none;
            }

        </style>

    </head>
    <body>
        <div data-role="page" id="inbox">
            <div data-role="header" data-position="fixed" data-tap-toggle="false"> 
                <h1>EnjoyHealth.me</h1>
                <a href="#settingsPopup" data-rel="popup" data-icon="gear" class="ui-btn-right">Opciones</a>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#inbox" class="ui-btn-active" rel="external">Recibidos</a></li>
                        <li><a href="mensajesEnviados.html" rel="external">Enviados</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div>

            <div data-role="content" style="height:100%;">
                <div id="wrapper">
                    <div id="scroller">
                        <div id="pullDown">
                          <span class="pullDownIcon"></span><span class="pullDownLabel">Arrastra para actualizar</span>
                        </div>
                       
                        <ul id="publicationList">           
                        </ul>
                    </div>
                </div>

            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">        
                <div data-role="navbar" class="navFooter" role="navigation">
                    <ul>
                        <li><a href="planActual.html" rel="external" id="planes" data-icon="custom" data-iconpos="bottom">Planes</a></li>
                        <li><a href="historialPeso.html" rel="external" id="historial" data-icon="custom"  data-iconpos="bottom">Historial</a></li>
                        <li><a href="#inbox" id="inbox" class="ui-btn-active" data-icon="custom"  data-iconpos="bottom">Inbox</a></li>
                        <li><a href="registro.html" rel="external" id="registro" data-icon="custom"  data-iconpos="bottom">Registro</a></li>
                        <li><a href="#" id="perfil" data-icon="custom" data-iconpos="bottom">Perfil</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->

        </div><!-- /page -->

        
    </body>
</html>
